<template>
	<!-- fontFamily为字体库 -->
	<div class="app-wrapper" >
		<!-- 侧边栏纵向布局 -->
		<div class="app-sidebar">
			<div class="has-logo">
				<el-image style="width: 30px; height: 30px" :src="logo"></el-image>
				<h1 class="sidebar-title" :title="title">{{ title }}【{{appType}}】 </h1>
			</div>
			<div class="has-center">
				<el-button type="primary" :loading="btn.loading" size="mini" round v-if="btn.show">{{btn.text}}</el-button>
			</div>
			<div class="right-menu-btns">
				<el-tooltip class="item" effect="light" content="数据库" placement="bottom">
				    <i class="icon el-icon-coin" @click="showDatabaseWindow"></i>
				</el-tooltip>
				<i class="icon el-icon-s-tools" @click="showlogWindow"></i>
				<i class="icon el-icon-minus" @click="minimizeFn"></i>
				<i class="icon el-icon-close" @click="closeFn"></i>
			</div>
		</div>
		<!-- 右边主体 -->
		<div class="app-container" >
			<div class="app-left">
				<left-menu></left-menu>
			</div>
			<!-- 主体 -->
			<div class="app-main">
				<app-main />
			</div>
		</div>
		
	</div>
</template>

<script>
	let that
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import {
		AppMain,
		leftMenu
	} from './components'
	import bus from "/static/js/bus.js"
	const { ipcRenderer } = require("electron");
	export default {
		name: 'Layout',
		components:{
			AppMain,
			leftMenu
		},
		computed: {
			...mapGetters(['userInfo','size','version','appType']),
			...mapState({
				title: state => state.settings.title,
			}),
		},
		data(){
			return {
				logo:require('/static/images/Log.png'),
				btn:{
					show:false,//是否显示
					loading:false,//是否加载
					text:''//显示内容
				},
				// log:[],
				// drawer:{
				// 	show:false
				// }
				
			}
		},
		mounted() {
			that=this
			bus.$off('topActiveInfo')
			bus.$on('topActiveInfo',(res)=>{
				if(res.action=='btnInfo'){//按钮显示内容
					that.btn=res.data
				}
				// if(res.action=='drawLog'){//系统日志
				// 	that.log.push(res.data)
				// }
			})
			//监听子窗口传递打过来的数据
			ipcRenderer.on('emitMsg',(event, res)=>{
				bus.$emit('menuMsseage', res)
			})
		},
		methods: {
			//显示设置的子窗口
			showlogWindow(){
				ipcRenderer.send("new-setUp-window",{action:'showSubWindow',data:''});//向主进程发送数据
			},
			//显示数据库的子窗口
			showDatabaseWindow(){
				ipcRenderer.send("new-database-window",{action:'showSubWindow',data:''});//向主进程发送数据
			},
			minimizeFn(){
				ipcRenderer.send("sendMessage",{
					action:'min-app'
				});
			},
			async closeFn(){
				await this.$store.dispatch('user/logout')
				this.$router.push({
					name: 'Login',
					path: '/Login'
				})
				ipcRenderer.send("sendMessage",{
					action:'close-app',//关闭窗口
				});
			},
			navigetTo(){
				that.$router.push({name:"dataBase",path:"/dataBase"})
			},
			ledOpen(msg){
				let data = {
					action: 'sendCommand',
					data: msg
				}
				bus.$emit('menuMsseage', data)
			},
			//退出产测
			signOut(){
				let data = {
					action: 'signOutTest',
					data: '退出产测'
				}
				bus.$emit('menuMsseage', data)
			},
			closeSocket(){
				let data = {
					action: 'closeSocket',
					data: '断开印章socket'
				}
				bus.$emit('menuMsseage', data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-wrapper {
		display: flex;height: 100vh;width: 100%;flex-direction: column;background-color: #f6f8f9;
		.app-sidebar{
			width: 100%;background-image: linear-gradient(#f0f0f0, #fff,#f0f0f0);overflow: hidden;-webkit-app-region: drag;
			display: flex;justify-content: space-between;align-items: center;padding: 10px 15px;box-sizing: border-box; 
			.has-logo{
				display: flex;align-items: center;
				.sidebar-title{
					display: inline-block;margin: 0;color: #000;
					font-weight: 600;margin-left: 10px;
					font-size: 14px;
					margin-right: 10px;
					max-width: 140px;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
			.has-center{
				text-align: center;
			}
			.right-menu-btns{
				-webkit-app-region: no-drag;
				.icon{cursor: pointer;margin-left: 10px;}
			}
		}
		.app-container{
			height: 100%; display: flex;background-color: #fff;overflow-y: auto;
			.app-left{
				width: 220px;border-right: 1px solid #f0f0f0;
			}
			.app-main{
				flex: 1;background-color: #fff;height: 100%;overflow-y: auto;
			}
		}
		.drawer{
			padding: 10px;height: 100%;box-sizing: border-box;
			.version{
				position: absolute;bottom: 10px;right: 10px;
			}
			.lz-el-btn {
				width: 100%;margin: 0;margin-bottom: 10px;
			}
			.el-drawer__header{
				margin-bottom: 0;
			}
		}
	}
</style>
